<!-- css - 《高效前端：Web高效编程与优化实践》 -->
<template>
  <div>
    <h1>《高效前端：Web高效编程与优化实践》</h1>

    <ContentTitle title="hover提示" class="juli"></ContentTitle>
    <p style="margin-top: 20px;">
      hello, <span class="span" data-title="Frontend Development">FED</span>
    </p>

    <ContentTitle title="带边框的三角形" class="juli"></ContentTitle>
    <div class="chat-msg">hi，qin</div>

    <ContentTitle title="使用伪类元素：画分割线" class="juli"></ContentTitle>
    <p class="fenge">or</p>

    <ContentTitle title="CSS计数" class="juli"></ContentTitle>
    <div>
      <div class="choose">
        <label><input type="checkbox" />苹果</label>
        <label><input type="checkbox" />香蕉</label>
        <label><input type="checkbox" />梨</label>
        <label><input type="checkbox" />柿子</label>
        <label><input type="checkbox" />桃子</label>
      </div>
      <p>您选择了<span class="count"></span>种水果</p>
    </div>

    <ContentTitle title="Animation" class="juli"></ContentTitle>
    <div class="space">
      <div class="wheel">
        <div class="line"></div>
      </div>
    </div>

    <ContentTitle title="clip-path鼠标滑动效果" class="juli"></ContentTitle>
    <div>
      <img src="/static/images/1.jpg" alt="" srcset="" class="clip-img" />
    </div>

    <ContentTitle title="CSS居中" class="juli"></ContentTitle>
    <div class="my-container">
      <img src="/static/images/1.jpg" alt="" srcset="" style="margin: 0 auto" />
    </div>

    <ContentTitle title="多行文本居中" class="juli"></ContentTitle>
    <div class="middle-text">
      <span class="middle-text-txt">毁掉我们的不是我们所憎恨的东西，而恰恰是我们所热爱的东西。</span>
    </div>

    <ContentTitle title="三栏布局-grid网格" class="juli"></ContentTitle>
    <div class="grid-layout">
      <div>left</div>
      <div>middle</div>
      <div>right</div>
    </div>

  </div>
</template>

<script>
export default {
  mounted() {
    this.setColor();
    this.uniqueArray();
  },
  computed: {},
  data() {
    return {};
  },
  methods: {
    // 分组赋值
    setColor() {
      const colorObj = {
        0: "c0",
        1: "c1",
        2: "c2",
        3: "c3",
        4: "c4",
      };
      const list = [];
      for (let i = 0; i < 20; i += 1) {
        list.push({
          name: i,
          color: null,
        });
      }
      const group = 5; // 几组
      const num = list.length / group; // 每组几个
      for (let i = 0; i < list.length; i += 1) {
        list[i].color = colorObj[parseInt(i / num)];
      }
      console.log(list);
    },
    // 数组去重
    uniqueArray() {
      // 1.使用Set + Array
      const arr0 = [3, 62, 3, 38, 20, 42, 14, 5, 38, 29, 2];
      console.log(Array.from(new Set(arr0)));

      // 2.使用splice
      const arr1 = [3, 62, 3, 38, 20, 42, 14, 5, 38, 29, 2];
      for (let i = 0; i < arr1.length; i += 1) {
        for (let j = i + 1; j < arr1.length; j += 1) {
          if (arr1[j] === arr1[i]) {
            arr1.splice(j--, 1);
          }
        }
      }
      console.log(arr1);

      // 3.只使用Array
      const arr2 = [3, 62, 3, 38, 20, 42, 14, 5, 38, 29, 2];
      const retArray = [];
      for (let i = 0; i < arr2.length; i += 1) {
        if (retArray.indexOf(arr2[i]) < 0) {
          retArray.push(arr2[i]);
        }
      }
      console.log(retArray);
    },
  },
};
</script>

<style lang="less" scoped>
.juli {
  margin-top: 20px;
}

.span[data-title] {
  position: relative;
  cursor: pointer;
}
.span[data-title]:hover::before {
  content: attr(data-title);
  position: absolute;
  top: -150%;
  left: 50%;
  width: 153px;
  background-color: azure;
}

.chat-msg {
  width: 300px;
  height: 80px;
  border: 1px solid #ccc;
  position: relative;
  border-radius: 5px;
  padding: 10px;
  filter: drop-shadow(0 0 2px #999); // 添加阴影
  background-color: #fff;
}
.chat-msg::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 34px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid #ccc;
}
.chat-msg::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 34px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid #fff;
}

.fenge {
  text-align: center;
  position: relative;
  width: 450px;
}
.fenge::after,
.fenge::before {
  content: "";
  // 把一个元素absolute定位后会强制变成块级元素
  position: absolute;
  top: 12px;
  height: 1px;
  background-color: #ccc;
  width: 200px;
}
.fenge::before {
  left: 0;
}
.fenge::after {
  right: 0;
}

.choose {
  counter-reset: fruit;
}
.choose input:checked {
  counter-increment: fruit;
}
.count::before {
  content: counter(fruit);
}

.wheel {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid @primary-color;
  position: relative;
  animation: move 3s linear 5;
}
.line {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: @primary-color;
  position: absolute;
  left: -5px;
  top: 17px;
}
@keyframes move {
  100% {
    transform: translateX(350px) rotate(859.4deg);
  }
}

.clip-img {
  clip-path: circle(40% at 50% 50%);
  transition: clip-path 400ms ease;
}
.clip-img:hover {
  clip-path: circle(75% at 50% 50%);
}

.my-container {
  width: 450px;
  height: 300px;
  background-color: yellowgreen;
}
.my-container::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.middle-text {
  height: 200px;
  width: 100px;
  background-color: yellowgreen;
  line-height: 200px;
}
.middle-text-txt {
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

.grid-layout {
  display: grid;
  grid-template-columns: 100px auto 100px;
}
.grid-layout div:nth-child(1) {
  background-color: aquamarine;
}
.grid-layout div:nth-child(2) {
  background-color: burlywood;
}
.grid-layout div:nth-child(3) {
  background-color: chocolate;
}
</style>
